<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';

import {
  ElCard,
  ElImage,
  ElLink,
  ElScrollbar,
  ElSkeleton,
  ElSkeletonItem,
  ElSpace,
  ElTag,
} from 'element-plus';

import { searchDramaDetailsApi } from '#/api';
import anorak from '#/assets/image/anorak.jpg';

const route = useRoute();
const id = route.params.id;
const detailsDrama = ref();
const name = ref('');
const overview = ref('');
const seansonList = ref();
const loading = ref(true);

const initDetailsDrama = async () => {
  detailsDrama.value = await searchDramaDetailsApi({ id });
  name.value = detailsDrama.value.name;
  overview.value = detailsDrama.value.overview;
  seansonList.value = detailsDrama.value.seasonVoList;
  loading.value = false;
};

initDetailsDrama();

const router = useRouter();
const dramaShares = (sid: number, sname: string) => {
  const nameTitle = encodeURIComponent(name.value);
  const snameTitle = encodeURIComponent(sname);
  router.push({ path: `/sub/drama/${id}/${sid}/${nameTitle}/${snameTitle}` });
};
</script>

<template>
  <Page :description="`${overview.slice(0, 47)}...`" :title="name">
    <ElSpace
      v-for="(item, index) in seansonList"
      :key="index"
      :fill-ratio="18"
      wrap
    >
      <ElCard style="margin: 28px">
        <template #header>
          <ElScrollbar
            :min-size="0"
            class="demoElScrollbar"
            style="width: 12rem"
          >
            <div style="display: flex">
              <ElLink
                :href="item.source"
                :underline="false"
                class="scrollbar-demo-item"
                target="_blank"
                @click.stop
              >
                {{ item.title }}
              </ElLink>
            </div>
          </ElScrollbar>
        </template>
        <div @click="dramaShares(item.snumber, item.title)">
          <div style="position: relative">
            <ElSkeleton
              :loading="loading"
              :throttle="500"
              style="width: 188px; height: 282px"
            >
              <template #template>
                <ElSkeletonItem
                  style="width: 188px; height: 282px; border-radius: 4%"
                  variant="image"
                />
              </template>
              <template #default>
                <ElImage
                  :src="item.image === null ? anorak : item.image"
                  style="border-radius: 4%"
                >
                  <template #error>
                    <ElImage
                      :src="anorak"
                      class="image"
                      style="border-radius: 4%"
                    />
                  </template>
                </ElImage>
              </template>
            </ElSkeleton>

            <ElTag
              v-if="item.average !== 0"
              effect="dark"
              round
              style="position: absolute; top: 1%; left: 1%"
              type="danger"
            >
              {{ item.average }}
            </ElTag>

            <ElTag
              v-if="item.count !== 0"
              effect="dark"
              round
              style="position: absolute; top: 1%; right: 3%"
              type="success"
            >
              {{ item.count }}
            </ElTag>

            <ElTag
              effect="dark"
              round
              style="position: absolute; bottom: 2%; left: 1%"
              type="info"
            >
              {{ item.snumber }}
            </ElTag>

            <ElTag
              v-if="item.time !== ''"
              effect="dark"
              round
              style="position: absolute; right: 3%; bottom: 2%"
              type="primary"
            >
              {{ item.time }}
            </ElTag>
          </div>
        </div>
      </ElCard>
    </ElSpace>
  </Page>
</template>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: max-content;
  text-align: center;
  border-radius: 4px;
}
</style>
